<template>
  <div class="wechatPayment-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>财务中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cost' }">费用中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/card-renew' }"
        >SIM卡续费</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="wechatPayment-content">
      <div class="title">SIM卡续费</div>
      <!-- 说明 -->
      <div class="desc">
        <div class="formula">
          提示：
          <br />1、此处仅支持乐汇园SIM卡续费，非乐汇园渠道购买的卡请自行关注卡的用量，按时充值
          <br />2、自主充值期为：每月1号-25号。特别提示：到期卡需在自主充值期内提前进行续费充值操作，鉴于运营商会提前销户到期卡，逾期续费可能会出现充值失败的情形。
          <br />3、续费费用从【财务中心-费用中心-账户概览】中扣除，支持开具发票
          <br />4、续费后到期时间会有短暂的延迟，请稍后主动刷新页面查看
          <br />
        </div>
      </div>
      <!-- 表格 -->
      <div class="content tables">
        <div class="tab">
          <div class="left">
            <el-button
              round
              :color="tabActive == 1 ? '#0071bb' : ''"
              @click="changeTab(1)"
              >零售柜</el-button
            >
            <el-button
              round
              :color="tabActive == 2 ? '#0071bb' : ''"
              @click="changeTab(2)"
              >提货柜</el-button
            >
          </div>
        </div>
        <div class="search">
          <el-form
            :inline="true"
            :model="formInline"
            style="width: 100%; display: flex"
          >
            <el-form-item label="设备名称/编号">
              <el-input
                v-model="formInline.code"
                placeholder="请输入设备名称/编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="SIM卡号">
              <el-input
                v-model="formInline.region"
                placeholder="请输入SIM卡号"
              ></el-input>
            </el-form-item>

            <div class="card">
              卡提供方:
              <div class="date-tabs">
                <div
                  v-for="item in cardList"
                  :key="item.index"
                  :class="activeCard === item.index ? 'activity-item' : ''"
                  class="tabs-item"
                  @click="changeCardTab(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
            <div class="card">
              售卖状态:
              <div class="date-tabs">
                <div
                  v-for="item in saleList"
                  :key="item.index"
                  :class="activeSale === item.index ? 'activity-item' : ''"
                  class="tabs-item"
                  @click="changeSaleTab(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
            <div class="card">
              在线状态:
              <div class="date-tabs">
                <div
                  v-for="item in lineList"
                  :key="item.index"
                  :class="activeline === item.index ? 'activity-item' : ''"
                  class="tabs-item"
                  @click="changeLineTab(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </el-form>
          <div class="line-btn">
            <div>
              <el-button round color="#0071bb" :icon="Search">搜索</el-button>
              <el-button round :icon="RefreshLeft">重置</el-button>
              <el-button round :icon="Refresh">刷新</el-button>
            </div>
            <el-button round @click="show = true" class="f0a93e" color="#f0a93e"
              >SIM卡续费</el-button
            >
          </div>
        </div>
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column type="selection" v-model="whole" width="50px" />
          <el-table-column prop="time" label="设备名称" />
          <el-table-column prop="no" label="设备编号" />
          <el-table-column prop="content" label="SIM卡号" />
          <el-table-column prop="money" label="售卖状态" />
          <el-table-column prop="balance" label="在线状态" />
          <el-table-column prop="balance" label="SIM卡到期日期" />
        </el-table>
      </div>
      <!-- 底部分页 -->
      <div class="page_number">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :size="size"
          :disabled="disabled"
          layout="prev, pager, next, jumper,total"
          :total="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog v-model="show" title="SIM卡续费" width="580" align-center>
      <div class="list">
        <div class="item">
          <span class="name">设备编号：</span>
          <span class="value">869825043628429</span>
        </div>
        <div class="item">
          <span class="name">到期时间：</span>
          <span class="value">2025-04-22 11:15:07</span>
        </div>
        <div class="item">
          <span class="name">续费时间：</span>
          <span class="value">
            <el-input
              placeholder
              style="width: 100px; margin-right: 6px"
            ></el-input>
            <span>年</span>
          </span>
          <span class="tip">（¥ 150/年）</span>
        </div>
        <div class="item">
          <span class="name">总计：</span>
          <span class="value fd">¥ 150.00</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button round type="primary" color="#0071bb">确定</el-button>
          <el-button round @click="show = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Refresh, Search, RefreshLeft } from "@element-plus/icons-vue";
const whole = ref(null);
const currentPage = ref(1);
const pageSize = ref(1);
const size = ref();
const disabled = ref(false);

const show = ref<boolean>(false);
const activeCard = ref("1");
const cardList = ref([
  {
    name: "全部",
    index: "1",
  },
  {
    name: "乐汇园",
    index: "2",
  },
  {
    name: "非乐汇园",
    index: "3",
  },
]);
const changeCardTab = (val: any) => {
  // 修改了卡提供方
  activeCard.value = val.index;
};
const activeSale = ref("1");
const saleList = ref([
  {
    name: "全部",
    index: "1",
  },
  {
    name: "停止售卖",
    index: "2",
  },
  {
    name: "正常售卖",
    index: "3",
  },
  {
    name: "待投放",
    index: "4",
  },
]);
const changeSaleTab = (val: any) => {
  // 修改了售卖状态
  activeSale.value = val.index;
};
const activeline = ref("1");
const lineList = ref([
  {
    name: "全部",
    index: "1",
  },
  {
    name: "离线",
    index: "2",
  },
  {
    name: "在线",
    index: "3",
  },
]);
const changeLineTab = (val: any) => {
  // 修改了在线状态
  activeline.value = val.index;
};
// 入账记录表格数据
const tableData1 = [
  {
    id: "1",
    time: "2024-05-12",
    no: "20240512555432652",
    content: "零售柜销售",
    money: "1066.00",
    balance: "63255.00",
  },
  {
    id: "2",
    time: "2024-05-12",
    no: "20240512555432652",
    content: "零售柜销售",
    money: "1066.00",
    balance: "63255.00",
  },
  {
    id: "3",
    time: "2024-05-12",
    no: "20240512555432652",
    content: "零售柜销售",
    money: "1066.00",
    balance: "63255.00",
  },
];
const tabActive = ref(1);
const formInline = ref({
  code: "",
  region: "",
});
const changeTab = (value: number) => {
  tabActive.value = value;
};

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style scoped lang="scss">
.el-form-item {
  margin: 0px;
  display: flex;
  align-items: center;
  margin-right: 20px !important;
  label {
    height: 100%;
    display: inline-block;
  }
}
.wechatPayment-page {
  padding: 20px 10px;
  box-sizing: border-box;
  background-color: #f1f1f1;
}
.wechatPayment-content {
  padding: 10px;
  background: #fff;
  margin-top: 20px;
  border-radius: 4px;
}
.title {
  color: #4d4d4d;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}

// 说明
.desc {
  padding: 10px 20px;
  margin-top: 10px;
  background: #00ffff;
  .text {
    color: #000000;
    // font-size: 18px;
    margin-bottom: 6px;
  }
  .formula {
    color: #666666;
    font-size: 12px;
  }
}

// tab表格
.tab {
  display: flex;
  justify-content: space-between;
  margin: 15px 0px;
  padding: 0 10px;
  button {
    width: 140px !important;
  }

  .search {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

  }
}
.line-btn {
  margin: 15px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.apply {
  position: absolute;
  right: 30px;
}
.f0a93e {
  color: #ffffff;
}
.card {
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 12px;
  .date-tabs {
    text-align: center;
    display: flex;
    font-size: 12px;
    padding: 10px;

    .tabs-item {
      width: 60px;
      padding: 5px;
      background-color: #fff;
      border: 1px solid #d2d2d2;
      border-radius: 20px;
      margin-right: 5px;
    }

    .activity-item {
      background-color: #0071bb;
      border: 1px solid #0071bb;
      color: #fff;
    }

    .tabs-item:hover {
      cursor: pointer;
    }
  }
}


:deep() {
  .el-form-item__label {
    font-size: 12px !important;
  }
  .el-form-item__content {
    width: 140px !important;
  }
}
.df {
  display: flex;
  align-items: center;
}
.fd {
  font-weight: bold;
}
.list {
  padding: 0 30px;

  box-sizing: border-box;
  .item {
    height: 40px;
    line-height: 40px;
    color: #4d4d4d;
    font-size: 16px;
    position: relative;
    .name {
      width: 180px;
      display: inline-block;
      text-align: right;
    }
    .value {
      margin-left: 10px;
    }
    .tip {
      color: #989898;
      font-size: 12px;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
}
</style>
